<template>
  <el-container class="container">
<!--    <el-header style="background: #1d7df9;">header </el-header>-->
<!--    <el-container>-->
<!--      <el-header><CommonHeader/></el-header>-->
<!--      <el-aside :width="asideWidth" class="aside" style="overflow-x: hidden;">-->
<!--        <CommonAside/>-->
<!--      </el-aside>-->
<!--      <el-container>-->
<!--        <el-main>-->
<!--          <router-view/>-->
<!--        </el-main>-->
<!--        &lt;!&ndash;        <el-footer>Footer</el-footer>&ndash;&gt;-->
<!--      </el-container>-->
<!--    </el-container>-->
    <!-- 左侧菜单 -->
        <el-aside :width="asideWidth"  style="overflow-x: hidden;">
          <CommonAside />
        </el-aside>
        <!-- 右侧内容区 -->
        <el-container>
          <!-- 顶部 Header -->
          <el-header>
            <CommonHeader/>
          </el-header>
          <!-- 主要内容 -->
          <el-main style="height: 100%" class="mainAll">
            <router-view/>
          </el-main>
        </el-container>
  </el-container>
</template>

<script>
import CommonAside from '@/mainComponents/CommonAside/CommonAside.vue';
import CommonHeader from '@/mainComponents/CommonHeader/CommonHeader.vue';
import variables from '@/styles/variables.scss'

export default {
  name: 'layout2',
  components: {
    CommonAside,
    CommonHeader,
  },
  computed: {
    asideWidth() {
      return this.$store.getters.siderType ? variables.sideBarWidth : variables.hideSideBarWidth
    },
  },
};
</script>
<style scoped>
.container {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0; /* 设置滚动条的宽度 */
  border-radius: 5px;
}

/* 自定义滚动条轨道 */

::-webkit-scrollbar-track {
  background: #e6e6e6; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */

::-webkit-scrollbar-thumb {
  background: #e6e6e6; /* 设置滑块的背景颜色 */
}

/* 当滑块悬停或活动时自定义 */

::-webkit-scrollbar-thumb:hover {
  background: #e6e6e6; /* 设置滑块在悬停状态下的背景颜色 */
}

::v-deep .el-menu-item {
  margin-left: 0;
}

::v-deep .is-active {
  margin-left: 0;
}

.el-header {
  padding: 0 10px;
  background: #FFFFFF;
  box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
  text-align: center;
}

.el-aside {
  width: 210px;
}

.el-main {
  background-color: #f5f7fa;
  overflow-y: auto;
  padding: 10px;
  flex: 1;
}

.mainAll {

}
</style>
